"use client"

import { useState } from "react"
import { View, Text, StyleSheet, TouchableOpacity, Platform } from "react-native"
import { Volume2, Video, AlertCircle } from "lucide-react-native"
import { theme } from "../../constants/theme"

interface PhoneticViewProps {
    word: {
        word: string
        phonetic: string
        phonemes: string[]
        meaning: string
        type: string
    }
}

// 更新相似单词数据结构，按音素分组
const SIMILAR_PHONETIC_WORDS = {
    k: [
        {
            word: "constitute",
            phonetic: "/kɒnstɪtjuːt/",
            type: "v.",
            meaning: "构成；被视为；成立",
        },
        {
            word: "inspect",
            phonetic: "/ɪnˈspekt/",
            type: "v.",
            meaning: "检查；视察",
        },
        {
            word: "sacrifice",
            phonetic: "/ˈsækrɪfaɪs/",
            type: "v.",
            meaning: "牺牲；献出；供奉",
        },
    ],
    ɒ: [
        {
            word: "constitute",
            phonetic: "/kɒnstɪtjuːt/",
            type: "v.",
            meaning: "构成；被视为；成立",
        },
        {
            word: "constant",
            phonetic: "/ˈkɒnstənt/",
            type: "adj.",
            meaning: "持续的；恒定的",
        },
        {
            word: "concept",
            phonetic: "/ˈkɒnsept/",
            type: "n.",
            meaning: "概念；观念",
        },
    ],
    // 其他音素的相似单词...
}

export function PhoneticView({ word }: PhoneticViewProps) {
    const [selectedPhoneme, setSelectedPhoneme] = useState(word.phonemes[0])
    const [isPlaying, setIsPlaying] = useState(false)
    const [isVideoPlaying, setIsVideoPlaying] = useState(false)
    const [playingWordId, setPlayingWordId] = useState<string | null>(null)

    const handlePlayAudio = () => {
        setIsPlaying(true)
        setTimeout(() => setIsPlaying(false), 1000)
    }

    const handlePlayVideo = () => {
        setIsVideoPlaying(true)
        setTimeout(() => setIsVideoPlaying(false), 1000)
    }

    const handlePhonemePress = (phoneme: string) => {
        setSelectedPhoneme(phoneme)
    }

    const handleWordPress = (wordId: string) => {
        setPlayingWordId(wordId)
        // 模拟播放音频
        setTimeout(() => setPlayingWordId(null), 1000)
    }

    // 获取当前音素对应的单词列表
    const currentPhonemeWords = SIMILAR_PHONETIC_WORDS[selectedPhoneme.replace(/[/]/g, "")] || []

    return (
        <View style={styles.container}>
            {/* 顶部单词卡片 */}
            <View style={styles.wordCard}>
                <View style={styles.wordHeader}>
                    <View style={styles.wordInfo}>
                        <View style={styles.wordRow}>
                            <Text style={styles.wordText}>{word.word}</Text>
                            <View style={styles.wordActions}>
                                <TouchableOpacity style={styles.actionButton} onPress={handlePlayAudio} activeOpacity={0.7}>
                                    <Volume2 size={18} color={theme.colors.primary.default} />
                                    <Text style={styles.phoneticText}>{word.phonetic}</Text>
                                </TouchableOpacity>

                                <TouchableOpacity style={styles.actionButton} onPress={handlePlayVideo} activeOpacity={0.7}>
                                    <Video size={18} color={theme.colors.primary.default} />
                                    <Text style={styles.actionButtonText}>{selectedPhoneme}</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                        <View style={styles.wordDetails}>
                            <Text style={styles.wordType}>{word.type}</Text>
                            <Text style={styles.meaningText}>{word.meaning}</Text>
                        </View>
                    </View>
                </View>

                {/* 音标和音素按钮 */}
                <View style={styles.phonemesContainer}>
                    {word.phonemes.map((phoneme, index) => (
                        <TouchableOpacity
                            key={index}
                            style={[styles.phonemeButton, selectedPhoneme === phoneme && styles.phonemeButtonActive]}
                            onPress={() => handlePhonemePress(phoneme)}
                            activeOpacity={0.7}
                        >
                            <Text style={[styles.phonemeText, selectedPhoneme === phoneme && styles.phonemeTextActive]}>
                                {phoneme}
                            </Text>
                        </TouchableOpacity>
                    ))}
                </View>
            </View>

            {/* 相似单词列表 */}
            <View style={styles.similarWordsCard}>
                <View style={styles.cardHeader}>
                    <Text style={styles.selectedPhoneme}>{selectedPhoneme}</Text>
                    <Text style={styles.cardTitle}>音标组单词</Text>
                </View>

                <View style={styles.wordsList}>
                    {currentPhonemeWords.length > 0 ? (
                        currentPhonemeWords.map((item, index) => (
                            <TouchableOpacity
                                key={index}
                                style={[styles.wordItem, playingWordId === `${item.word}-${index}` && styles.wordItemPlaying]}
                                onPress={() => handleWordPress(`${item.word}-${index}`)}
                                activeOpacity={0.7}
                            >
                                <View style={styles.wordItemContent}>
                                    <View style={styles.wordItemMain}>
                                        <Text style={styles.itemWord}>{item.word}</Text>
                                        <Text style={styles.itemPhonetic}>{item.phonetic}</Text>
                                    </View>
                                    <View style={styles.wordItemDetails}>
                                        <Text style={styles.itemType}>{item.type}</Text>
                                        <Text style={styles.itemMeaning}>{item.meaning}</Text>
                                    </View>
                                </View>
                            </TouchableOpacity>
                        ))
                    ) : (
                        <View style={styles.emptyContainer}>
                            <AlertCircle size={40} color={theme.colors.neutral.gray} />
                            <Text style={styles.emptyText}>暂无相关单词</Text>
                            <Text style={styles.emptySubText}>该音素下暂无相关单词数据</Text>
                        </View>
                    )}
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingHorizontal: theme.spacing.lg,
    },
    wordCard: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        marginBottom: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.5,
                shadowRadius: 8,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    wordHeader: {
        marginBottom: theme.spacing.lg,
    },
    wordInfo: {
        flex: 1,
    },
    wordRow: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: theme.spacing.sm,
    },
    wordText: {
        fontSize: theme.fontSize.xl,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
    },
    wordActions: {
        flexDirection: "row",
        gap: theme.spacing.md,
    },
    actionButton: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: `${theme.colors.primary.default}10`,
        borderRadius: theme.borderRadius.medium,
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.xs,
        gap: theme.spacing.xs,
    },
    actionButtonText: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.medium,
    },
    phoneticText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.primary.default,
        fontFamily: Platform.OS === "ios" ? "Helvetica" : "normal",
    },
    wordDetails: {
        flexDirection: "row",
        alignItems: "center",
        gap: theme.spacing.md,
    },
    wordType: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.medium,
    },
    meaningText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
    },
    phonemesContainer: {
        flexDirection: "row",
        flexWrap: "wrap",
        gap: theme.spacing.sm,
    },
    phonemeButton: {
        backgroundColor: `${theme.colors.primary.default}10`,
        borderRadius: theme.borderRadius.medium,
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.sm,
        minWidth: 40,
        alignItems: "center",
        borderWidth: 1,
        borderColor: "transparent",
    },
    phonemeButtonActive: {
        backgroundColor: theme.colors.primary.default,
        borderColor: theme.colors.primary.default,
    },
    phonemeText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.primary.default,
        fontFamily: Platform.OS === "ios" ? "Helvetica" : "normal",
    },
    phonemeTextActive: {
        color: theme.colors.neutral.white,
    },
    similarWordsCard: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        flex: 1,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.5,
                shadowRadius: 8,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    cardHeader: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: theme.spacing.lg,
        paddingBottom: theme.spacing.md,
        borderBottomWidth: 1,
        borderBottomColor: theme.colors.neutral.lightGray,
    },
    selectedPhoneme: {
        fontSize: theme.fontSize.xl,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.primary.default,
        marginRight: theme.spacing.md,
    },
    cardTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
    },
    wordsList: {
        marginTop: theme.spacing.md,
    },
    wordItem: {
        paddingVertical: theme.spacing.md,
        paddingHorizontal: theme.spacing.md,
        borderRadius: theme.borderRadius.medium,
        marginBottom: theme.spacing.sm,
        backgroundColor: theme.colors.neutral.white,
        borderWidth: 1,
        borderColor: theme.colors.neutral.lightGray,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.05)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.3,
                shadowRadius: 3,
            },
            android: {
                elevation: 1,
            },
        }),
    },
    wordItemPlaying: {
        borderColor: theme.colors.primary.default,
        backgroundColor: `${theme.colors.primary.default}05`,
    },
    wordItemContent: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
    },
    wordItemMain: {
        flex: 1,
    },
    wordItemDetails: {
        flex: 1,
        alignItems: "flex-end",
    },
    itemWord: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginBottom: 2,
    },
    itemPhonetic: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
        fontFamily: Platform.OS === "ios" ? "Helvetica" : "normal",
    },
    itemType: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.primary.default,
        marginBottom: 2,
    },
    itemMeaning: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
        textAlign: "right",
    },
    emptyContainer: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        paddingVertical: theme.spacing.xxxl,
    },
    emptyText: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.darkGray,
        marginTop: theme.spacing.lg,
        marginBottom: theme.spacing.sm,
    },
    emptySubText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
        textAlign: "center",
        paddingHorizontal: theme.spacing.xl,
    },
})

